<template>
	<div class="anonymous">
		<div class="header">
			<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousDetailBg.png" mode="widthFix"></image>
			<div class="text">{{topicInfo.topic}}</div>
		</div>
		
		<!-- 列表 -->
		<div class="list" v-if="listData.length!=0">
			<div class="item" v-for="(item,index) of listData" :key="index">
				<div class="item-top">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/personDefault.png" mode="aspectFill"></image>
					<div class="name">匿名机友</div>
					<div class="date">{{item.created_at}}</div>
				</div>
				<div v-if="topicInfo.is_owner==1" class="item-right">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousD.png" mode="" @click.stop="toShareAnonymous(item)" class="delete"></image>
				</div>
				<div class="item-bottom">
					{{item.content}}
				</div>
				<image  @click.stop="delMyTopicMessage(item,index)" src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousR.png" mode="widthFix" class="logo"></image>
			</div>

		</div>
		<!-- 列表end -->
		<div class="btn-wrapper" v-if="topicInfo.is_owner!=1">
			<div class="btn-left" >
				<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/personDefault.png" mode="aspectFill"></image>
				<div>
					<input type="text" placeholder-style="color:#fff" v-model="content"  placeholder="匿名哔哔一下"/>
				</div>
			</div>
			<div class="btn-right" @click="sendAnonymousMessageToTopic">
				确定
			</div>
		</div>
		
		<div class="no-tips" v-if="listData.length==0">
			<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noCollect.png" mode="widthFix"></image>
			<div>暂未发表过评论</div>
		</div>
		
		<!-- 创建弹窗 -->
		<!-- <van-popup :show="show" position="center" @click="onpopup" round>
		    <div class="register-wrapper">
				<div class="header-popup">
					<image src="/static/img/delbtn-black.png" @click="show=false"></image>
				</div>
				<div class="tit">留言</div>
				<div class="input">
					 <textarea @input="textareaChange" :value="content" maxlength="50" auto-height placeholder="请输入留言,不超过50字"/>
				</div>
				<div class="tips">已输入{{content.length}}</div>
				<div class="btn" @click="sendAnonymousMessageToTopic">提交</div>
			</div>
		</van-popup> -->
		<!-- 创建弹窗end -->
	</div>
</template>

<script>
	let defaultJpg=require('../../../../static/img/quan-active.png');
	export default {
		data() {
			return {
				defaultJpg,
				show:false,
				content:'',
				topicId:'',//主题id
				pageNum:1,
				topicInfo:'',//主题信息
				listData:[],
				userId:''//用户本身的id
			};
		},
		methods:{
			onpopup(){
			    if (this.show){
			        this.show = false;
					this.content=''
			    } else {
			        this.show = true;
			    }
			
			},
			textareaChange(e){
				console.log(e)
				this.content=e.detail.value
			},
			async getMyTopicMessageList(){
				//获取我的主题留言列表
				let params={
					page:this.pageNum,
					limit:10,
					user_token:uni.getStorageSync('userToken'),
					topic_id:this.topicId
				}
				let res=await this.$api.getMyTopicMessageList(params);
				if(res.data.level=='success'){
					this.listData=[...this.listData,...res.data.data.message_info];
					this.topicInfo=res.data.data.topic_info;
				}else{
					uni.showToast({
						icon:'none',
						title:res.data.message
					})
				}
				
			},
			async sendAnonymousMessageToTopic(){
				//留言
				let params={
					user_token:uni.getStorageSync('userToken'),
					content:this.content,
					topic_id:this.topicId
				}
				let res=await this.$api.sendAnonymousMessageToTopic(params);
				
				if(res.data.level=='success'){
					this.show=false;

					this.listData.unshift(res.data.data);
				}
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			},
			delMyTopicMessage(item,index){
				//删除留言
				let _this=this
				uni.showModal({
					title:'删除留言？',
					success: function (res) {
						if (res.confirm) {
							_this.delMyTopicMessageHandle(item,index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete(){
						console.log('完成')
					}
				})
				
			},
			async delMyTopicMessageHandle(item,index){
				let params={
					user_token:uni.getStorageSync('userToken'),
					id:item.id
				}
				let res=await this.$api.delMyTopicMessage(params);
				if(res.data.level=='success'){
					this.listData.splice(index,1)
				}
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			},
			
		},
		onLoad(options) {
			this.topicId=options.topicId;
			this.getMyTopicMessageList();
			if(options.inviteId){
				//邀请人的用户id，新用户授权时带上
				this.$bus.$data.inviteId=options.inviteId
			}
			this.userId=uni.getStorageSync('userId')
		},
		onReachBottom() {
			this.pageNum++;
			this.getMyTopicMessageList()
		},
		onShareAppMessage(){
		   return {
		    title: '哔哔机',
		    desc:'哔哔机',
			path: `/pages/notice/anonymous/anonymousDetail/anonymousDetail?topicId=${this.topicId}&inviteId=${this.userId}`
		  }
		},
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.no-tips{
		@include flexWrap();
		background: #fff;
		margin-top:-50rpx;
		color:#6F7073;
		&>div{
			text-align: center;
			width: 100%;
		}
		}
	.anonymous{
		.header{
			@include flex();
			background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousBg.png');
			width: 100%;
			height:400rpx;
			position: relative;
			image{
				position: absolute;
				// z-index: -1;
				left:50%;
				top:50%;
				transform: translate(-50%,-50%);
			}
			.text{
				position: relative;
				z-index: 10;
				margin:0 80rpx;
			}
		}
		.list{
			padding-bottom: 300rpx;
			.item{
				position: relative;
				margin:20rpx;
				padding:20rpx;
				border-radius: 20rpx;
				@include flexWrap(flex-start);
				background-color:#7595FF ;
				color:#fff;
				.logo{
					position: absolute;
					right: 0;
					top:-20rpx;
					width:132rpx;
					height: 132rpx;
				}
				.item-top{
					@include flex(flex-start);
					image{
						border-radius: 50%;
						width: 50rpx;
						height: 50rpx;
					}
					.name{
						margin:0 20rpx;
					}
					font-size:24rpx;
					font-weight:500;
					line-height:24rpx;
				}
				.item-right{
					position: absolute;
					right: 0;
					image{
						width: 50rpx;
						height: 50rpx;
					}
				}
				.item-bottom{
					width: 100%;
					margin-top: 30rpx;
					font-size:36rpx;
					font-weight:500;
					line-height:50rpx;
					
				}
			}
		}
		
		.btn-wrapper{
			width: 100%;
			position: fixed;
			bottom: 0rpx;
			padding: 20rpx 30px;
			box-sizing: border-box;
			background: #6030FF;
			@include flex(space-between);
			.btn-left{
				@include flex(flex-start);
				image{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}
				&>div{
					margin-left: 20rpx;
					height:32rpx;
					font-size:32rpx;
					color:rgba(255,255,255,1);
					line-height:32rpx;
				}
			}
			.btn-right{
				width:148rpx;
				height:102rpx;
				text-align: center;
				font-size:32rpx;
				line-height:102rpx;
				border-radius:16rpx;
				background-color: #FFE916;
				border:6rpx solid rgba(0,0,0,1);
			}
		}
		
		.register-wrapper{
			width: 80vw;
			min-height: 500rpx;
			position: relative;
			.header-popup{
				image{
					width:40rpx;
					height: 40rpx;
				}
				margin:20rpx;
			}
			.tit{
				text-align: center;
				color:#292929;
				font-weight:600;
				font-size: 36rpx;
				line-height: 36rpx;
				
			}
			textarea{
				// padding:20rpx;
				margin: 20rpx;
				width: auto;
				box-sizing: border-box;
			}
			.desc{
				text-align: center;
				color:#6F7073;
				font-size:28rpx;
				line-height: 28rpx;
				margin:40rpx auto;
			}
			.tips{
				text-align: right;
				font-size: 20rpx;
				margin-top:40rpx;
				margin-right: 20rpx;
			}
			.btn{
				position: absolute;
				bottom: 30rpx;
				background: #FFE226;
				height:88rpx;
				text-align: center;
				font-weight: 600;
				font-size: 28rpx;
				line-height: 88rpx;
				width:calc(80vw - 300rpx) ;
				margin:60rpx 0 60rpx 150rpx ;
				background:rgba(255,226,38,1);
				border-radius:16rpx;
			}
			
		}
	}
</style>
